<template>
    父<input type="text" v-model="count">
    <br><br>
    子<ChildCom v-model="count"/>
</template>

<script>
// 目标：封装一个输入框组件,实现基于prop的双向绑定
import ChildCom from './components/ChildCom'
import { ref, watch } from 'vue'
export default {
  components: {
    ChildCom
  },
  setup () {
    const count = ref(1)
    const timer = ref(null)
    // 封装一个计时器函数 只要数字小于10就每秒+1，大于10则暂停
    function running () {
      timer.value = setInterval(() => {
        count.value++
      }, 1000)
    }
    running()
    watch(() => count.value, () => {
      if (count.value >= 10) {
        clearInterval(timer.value)
      }
      // 小于10 just running
      running()
    })
    return { count }
  }
}
</script>

<style>

</style>
